<template>
  <div class="comment">
    <h1>评论</h1>
    <el-row>
      <el-col :span="18">
        <el-input
          type="textarea"
          :rows="6"
          placeholder="请输入内容"
          v-model="value"
        >
        </el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="comment">评论</el-button>
      </el-col>
    </el-row>
    <ul>
      <li class="comment-li" v-for="(item, index) in comments" :key="item.id">
        <div class="avatar"><img :src="item.avatar" /></div>
        <div class="con">
          <span class="nickname">{{ item.nickname }}</span>
          <p>{{ item.content }}</p>
          <div class="info">
            <span>{{ item.createTime | parseTime }}</span>
            <el-button
              @click="like(item.id, index)"
              type="text"
              icon="fa fa-thumbs-o-up"
              circle
              >{{ item.likeCount }}</el-button
            >
            <el-button type="text" @click="open(index)">回复</el-button>
          </div>
          <div class="reply">
            <div>
              <ul>
                <li
                  v-for="(item1, index1) in item.replyList"
                  :key="index1"
                  class="reply-li"
                >
                  <div class="reply-avatar">
                    <img :src="item1.avatar" />
                  </div>
                  <div class="con">
                    <div class="nickname">
                      <span>{{ item1.nickname }}</span>
                    </div>
                    <div class="time">
                      <span>{{ item1.createTime | parseTime }}</span>
                    </div>
                    <div class="content">
                      <p v-if="item1.replyId">
                        <span class="reply-color">
                          {{ "@" + item1.replyNickname }}</span
                        >
                        <span> {{ item1.content }}</span>
                      </p>
                      <p v-else>
                        {{ item1.content }}
                      </p>
                    </div>
                    <div class="info">
                      <span>{{ item1.createTime | parseTime }}</span>
                      <el-button
                        @click="like(item1.id, index, index1)"
                        type="text"
                        icon="fa fa-thumbs-o-up"
                        circle
                        >{{ item1.likeCount }}</el-button
                      >
                      <el-button type="text" @click="open(index, index1)"
                        >回复</el-button
                      >
                    </div>
                  </div>
                  <!-- <div class="reply-button">
                        <el-button
                          type="text"
                          icon="fa fa-thumbs-o-up"
                          circle
                        ></el-button>
                        <el-button type="text" @click="open(index, index1)"
                          >回复</el-button
                        >
                      </div> -->
                </li>
              </ul>
            </div>
            <div v-if="item.total > 3">
              <span>共{{ item.total }}条评论</span
              ><el-button type="text" @click="viewReplys(item.id, index)"
                >点击查看</el-button
              >
            </div>
            <div v-if="item.count > 0">
              <span>共{{ item.count }}条评论</span>
              <el-pagination
                @current-change="viewReplys(item.id, index, $event)"
                :current-page="item.current ? item.current : 1"
                small
                layout="prev, pager, next"
                :total="item.count"
                prev-text="上一页"
                next-text="下一页"
              >
              </el-pagination>
            </div>
          </div>
          <div v-show="item.flag">
            <el-input
              type="textarea"
              :rows="6"
              :placeholder="placeholder"
              v-model="replyContent"
            >
            </el-input>
            <el-button type="text" @click="reply(index)">提交</el-button>
          </div>
        </div>
      </li>
    </ul>
    <div>
      <el-pagination
        class="page"
        @current-change="init($event)"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize.pageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getComments } from "../api";
import { getReplys } from "../api";
import { comments } from "../api";
import { commentLike } from "../api";
export default {
  data() {
    return {
      comments: [],
      value: "",
      replyContent: "",
      currentIndex: 999,
      placeholder: "请输入内容",
      replyForm: {
        replyId: "",
        content: "",
        articleId: this.articleid,
        parentCommentId: "",
      },
      total: 0,
      pageSize: {
        cid: this.articleid,
        current: 1,
        pageSize: 5,
      },
    };
  },
  methods: {
    init(size) {
      if (size) {
        this.pageSize.current = size;
      } else {
        this.current = 1;
      }
      getComments(this.pageSize).then((res) => {
        if (res.data) {
          this.total = res.data.total;
          this.comments = res.data.recodes;
        }
      });
    },
    comment() {
      let comment = {
        content: this.value,
        articleId: this.articleid,
      };
      comments(comment).then((res) => {
        this.value = "";
        this.init();
      });
    },
    like(id, index, index1) {
      commentLike({id:id}).then((res) => {
        if (index1 != undefined) {
          // console.log(this.comments[index])
          
          this.comments[index].replyList[index1].likeCount = res.data.count;
        } else {
          this.comments[index].likeCount = res.data.count;
        }
      });
    },
    viewReplys(id, index, e) {
      let params;
      if (!e) {
        params = {
          cid: id,
          current: 1,
          pageSize: 5,
        };
      } else {
        params = {
          cid: id,
          current: e,
          pageSize: 5,
        };
      }

      getReplys(params).then((res) => {
        this.comments[index].replyList = res.data.recodes;
        this.comments[index].total = 0;
        this.comments[index].count = res.data.total;
      });
    },
    open(index, childIndex) {
      // 对子评论回复有设id
      if (childIndex >= 0) {
        let parentComment =
          this.comments[parseInt(index)].replyList[parseInt(childIndex)];
        this.placeholder = "回复" + parentComment.nickname;
        // 设置对谁评论
        this.replyForm.replyId = parentComment.userId;
      } else {
        this.placeholder = "回复" + this.comments[parseInt(index)].nickname;
      }
      // 设置父级评论
      this.replyForm.parentCommentId = this.comments[parseInt(index)].id;
      this.currentIndex = index;
    },
    reply() {
      this.replyForm.content = this.replyContent;
      comments(this.replyForm).then((res) => {
        this.replyContent = "";
        (this.replyForm = {
          replyId: "",
          content: "",
          articleId: this.articleid,
          parentCommentId: "",
        }),
          (this.currentIndex = 999);
        this.init();
      });
    },
  },
  props: {
    articleid: {
      require: true,
    },
  },
  created() {
    this.init();
  },
  watch: {
    currentIndex(newValue, oldValue) {
      if (oldValue != 999) {
        this.comments[parseInt(oldValue)].flag = false;
      }
      if (newValue != 999) {
        this.comments[parseInt(newValue)].flag = true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  margin-bottom: 88px;
  font-size: 18px;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.time {
  color: #b3b3b3;
}
.comment-item {
  position: relative;
}

.time {
  margin-top: 5px;
}

.reply-button {
  position: absolute;
  right: 0;
  top: -8px;
}
.reply-li {
  position: relative;
}

.comment-li {
  position: relative;
  margin-top: 20px;
  border-bottom: 1px solid #ebeef5;
}
.reply-color {
  color: #409eff;
}
.avatar img {
  margin: 24px 0 0 0px;
  position: absolute;
  width: 48px;
  height: 48px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid #ebeef5;
}
.page {
  right: 50%;
  transform: translateX(50%);
  position: absolute;
  margin-top: 18px;
}

.con {
  margin-left: 60px;
  padding: 22px 0 14px 0;
}
.con p {
  margin-top: 20px;
  color: #222;
}
.nickname {
  vertical-align: middle;
  color: #fb7299;
  font-style: normal;
  font-weight: 1;
}
.info {
  margin-top: 18px;
  color: #6d757a;
}
.reply-avatar img {
  margin: 24px 0 0 0px;
  position: absolute;
  width: 38px;
  height: 38px;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid #ebeef5;
}
</style>